<template>
  <Button type="primary"  @click="open()">Open notice</Button>
</template>

<script>
  export default {
    data() {
      return {
        items:[
          {
            number: '1111111111',
            pay: '1000',
            time: '2020.10.03'
          },
          {
            number: '2111111111',
            pay: '2000',
            time: '2020.10.04'
          },
          {
            number: '3111111111',
            pay: '3000',
            time: '2020.10.05'
          }
        ]
      }
    },
    mounted() {
      // v-for="(item,index) in items" :key="item.id"
      this.$Message.config({
        top: 300,
        duration: 0
      });
    },
    methods: {
      open () {
        this.$Notice.open({
          duration: 0,
          render: h =>{
            return h('div',{
              style:{
                fontSize: '16px',
                color: '#fff',
                textAlign: 'center',
                height: '28px',
                lineHeight: '28px',
                backgroundColor: '#ff9900'
              }
            },[
              h('div',{
                on: {
                  click: () => {
                  }
                }
              },'关闭所有消息')
            ]
          )}
        });

        this.$Notice.open({
          title: '您有待审核的订单',
          duration: 0,
          render: h =>{
            return h('div',{
              style:{
                padding: '0px 10px 10px 10px'
              }
            },[
            h('div',{
              style:{
                fontSize: '14px',
                padding: "2px 0"
              }
              },['交易单号:{{item.number}}']),
            h('div',{
              style:{
                fontSize: '14px',
                padding: "2px 0"
              }
            },['充值1000元']),
            h('div',{
              style:{
                fontSize: '14px',
                padding: "2px 0"
              }
            },['创建时间:111']),
            h('div',{
              style: {
                display: 'flex',
                justifyContent: 'flex-end',
                height: '24px',
                lineHeight: '24px'}
            },
            [
              h('Button',{
              style:{
                backgroundColor: '#2d8cf0',
                fontSize: '14px',
                color: '#fff',
                marginRight: '15px',
                height: '24px',
                lineHeight: '11px'
              },
              on: {
                click: () => {
                  this.$router.push({
                    name: 'off-check'
                  })
                }
              }
            },"审核"),
            h('Button',{
              style:{
                fontSize: '14px',
                height: '24px',
                lineHeight: '11px'
              },
              on: {
                click: () => {
                  this.$router.push({
                    name: 'off-view'
                  })
                }
              }
            },"查看")
            ])
            ]);
          }
        })
      }
    }
  }
</script>

<style lang="less">
  .ivu-notice-notice{
    border-left: 4px solid #ff9900 !important;
  }
  .ivu-notice-notice{
        margin-bottom: 10px;
        padding: 0px !important;
        border-radius: 4px;
        -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
        background: #fff;
        line-height: 1;
        position: relative;
        overflow: hidden;
  }
  .ivu-notice-with-desc .ivu-notice-title{
        font-weight: bold;
        /* margin-bottom: 8px; */
        padding: 8px 0px 8px 10px;
        border-bottom: 1px solid #eee;
  }
</style>
